<template>
  <section class="annex-list">
    <section v-for="(item, index) in annexList" :key="index">
      <a href="javascript:;" class="annex-item" @click="preview(item)">
        <span class="name">{{ item.name }}</span>
        <!--<section class="suffix">{{ item.suffix }}</section>-->
        <a-icon class="ml-8 error-color" v-if="!isPreview" type="delete" @click.stop="delFile(index)"/>
      </a>
    </section>
  </section>
</template>
<script>
export default {
  name: 'PreviewAnnex',
  props: {
    annexList: {
      type: Array,
      default: () => []
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    preview(item) {
      window.open(item.path)
    },
    delFile(index) {
      this.annexList.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }
  .annex-list {
    line-height: 1.5;
    .annex-item {
      margin: 4px 0;
      //.flex;
      /*max-width: 100%;*/
      /*display: inline-flex;*/
      /*.name {*/
        /*flex: 1;*/
      /*}*/
    };
  }
</style>